* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100%;
  background: #fff;
}
.wrap {
  position: absolute;
  bottom: 6.25rem;
  width: 6.25rem;
  margin-left: -50px;
}
.wrap .ball {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  animation: ballMove 500ms infinite alternate;
}
.red {
  left: 25%;
}
.red .ball {
  animation-delay: -200ms;
  background: linear-gradient(#e55, #b00);
}
.red .shadow {
  animation-delay: -200ms;
}
.green {
  left: 50%;
}
.green .ball {
  animation-delay: -100ms;
  background: linear-gradient(#5d5, #0a0);
}
.green .shadow {
  animation-delay: -100ms;
}
.blue {
  left: 75%;
}
.blue .ball {
  animation-delay: 0ms;
  background: linear-gradient(#59e, #04b);
}
.blue .shadow {
  animation-delay: 0ms;
}
.shadow {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 10%;
  width: 4.6875rem;
  height: 1.5625rem;
  z-index: -1;
  border-radius: 100%;
  background: #383838;
  animation: shadowMove 500ms infinite alternate;
}
@keyframes ballMove {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-150px);
  }
}
@keyframes shadowMove {
  from {
    transform: scale(0.75);
    opacity: 0.75;
  }
  to {
    transform: scale(1);
    opacity: 0.2;
  }
}
